<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in statCards" :key="index">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon" :style="{ backgroundColor: item.color }">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-title">{{ item.title }}</div>
            <div class="stat-value">{{ item.value }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="图表数据加载中..." />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>系统访问统计</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="图表数据加载中..." />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近登录记录</span>
            </div>
          </template>
          <el-table :data="loginRecords" style="width: 100%" border stripe>
            <el-table-column prop="username" label="用户名" width="120" />
            <el-table-column prop="ip" label="IP地址" width="150" />
            <el-table-column prop="location" label="登录地点" width="150" />
            <el-table-column prop="browser" label="浏览器" width="150" />
            <el-table-column prop="os" label="操作系统" width="150" />
            <el-table-column prop="loginTime" label="登录时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 统计卡片数据
const statCards = ref([
  {
    title: '总用户数',
    value: '1,234',
    icon: 'User',
    color: '#409EFF'
  },
  {
    title: '今日访问',
    value: '423',
    icon: 'View',
    color: '#67C23A'
  },
  {
    title: '系统消息',
    value: '25',
    icon: 'Message',
    color: '#E6A23C'
  },
  {
    title: '待处理事项',
    value: '12',
    icon: 'Bell',
    color: '#F56C6C'
  }
])

// 模拟登录记录数据
const loginRecords = ref([
  {
    username: 'admin',
    ip: '192.168.1.1',
    location: '北京',
    browser: 'Chrome',
    os: 'Windows 10',
    loginTime: '2023-06-15 10:30:45'
  },
  {
    username: 'user1',
    ip: '192.168.1.2',
    location: '上海',
    browser: 'Firefox',
    os: 'macOS',
    loginTime: '2023-06-15 09:15:22'
  },
  {
    username: 'user2',
    ip: '192.168.1.3',
    location: '广州',
    browser: 'Edge',
    os: 'Windows 11',
    loginTime: '2023-06-14 16:45:30'
  },
  {
    username: 'user3',
    ip: '192.168.1.4',
    location: '深圳',
    browser: 'Safari',
    os: 'iOS',
    loginTime: '2023-06-14 14:20:15'
  },
  {
    username: 'user4',
    ip: '192.168.1.5',
    location: '杭州',
    browser: 'Chrome',
    os: 'Android',
    loginTime: '2023-06-14 11:05:40'
  }
])
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  height: 150px;
  width: 300px;
  margin-bottom: 20px;
}

.stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 15px;
}

.stat-icon .el-icon {
  font-size: 20px;
  color: white;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 350px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-row {
  margin-bottom: 20px;
}
</style>
